<template>
  <div>
    <Breadcrumb :list="list"></Breadcrumb>
    <div class="con">
      <div class="left" v-if="flag === true">
        <p>添加标签</p>
        <a-input
          v-model:value="saveValue.name"
          placeholder="输入分类名称"
          style="width: 500px"
        />
        <a-input
          v-model:value="saveValue.value"
          placeholder="输入分类值(请输入英文、作为路由使用)"
          style="width: 500px"
        />
          <a-button type="primary" @click="save">保存</a-button>
      </div>
      <div class="left" v-else-if="flag === false">
        <p>管理标签</p>
        <a-input style="width: 500px"  v-model:value="saveValue.name"></a-input>
        <a-input style="width: 500px" v-model:value="saveValue.value"></a-input>
      <div>
          <a-button type="primary">更新</a-button>
            <a-button type="dashed" @click="backAdd">返回添加</a-button>
         <a-popconfirm
          title="Sure to delete?"
        >
         <a-button danger>删除</a-button>
        </a-popconfirm>
      </div>
      </div>
      <div class="right">
        <p>所有分类</p>
             <a-button
          style="margin: 0 10px"
          v-for="v in articlesData"
          :key="v.id"
          @click="handleFlag(v.id)"
          >{{ v.tag}}</a-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Breadcrumb from "../../components/Breadcrumb/index.vue";
import { ref, reactive, onMounted } from "vue";
import { addClassify, getClassify,findClassify} from "@/api/label";
import { message } from "ant-design-vue";
const list = ref<string[]>(["工作台","所有文章", "标签管理"]);
const saveValue = reactive({
  name: "",
  value: "",
});
const backAdd=()=>{
  saveValue.name = "";
  saveValue.value = "";
  flag.value=true
}
//判断为添加标签还是管理标签 true添加false管理
const flag = ref(true);
const handleFlag=async(id:number)=>{
  if(flag.value){
     flag.value=false
      let resp=await findClassify({id})
    let {tag,measure}=resp.data.data
    saveValue.name=tag
    saveValue.value=measure   
  }else{
    flag.value=true
    saveValue.name = "";
    saveValue.value = "";
  }
 
}
//添加分类名称以及分类值
const save = async () => {
  if (saveValue.value !== "" && saveValue.name !== "") {
    let resp = await addClassify({ ...saveValue });
    if (resp.data.code === 200) {
      getList();
      saveValue.name = "";
      saveValue.value = "";
    } else {
      message.error(resp.data.mess);
    }
  } else {
    message.error("不能为空");
  }
};
const articlesData = ref();
const getList = async () => {
  let resp = await getClassify();
  articlesData.value = resp.data.data;
};
onMounted(() => {
  getList();
});
</script>

<style scoped lang="scss">
.con {
  display: flex;
}
.left {
  width: 40%;
  height: 200px;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  margin-top: 20px;
  p {
    width: 100%;
    border-bottom: 1px solid #dddddd;
    padding: 10px 20px;
  }
  .ant-btn:nth-child(3){
    margin-left:300px;
  }
}
.right {
  width: 57%;
  height: 200px;
  background: white;
  margin-top: 20px;
  margin-left: 30px;
  p {
    width: 100%;
    border-bottom: 1px solid #dddddd;
    padding: 10px 20px;
  }
}
</style>
